<template>
	<view class="content">
		<image class="logo" src="/static/logo_white2.jpg"></image>
		<text style="margin-bottom: 30rpx;font-size: 20px;">织云易商主播客户端</text>
		<view class="text-area">
			
			
			<button class="btn" type="primary" @tap="sanPushUrl()" >设置推流地址</button>
			<button class="btn" type="primary" @tap="sanSetMqtt()" >接入公屏信息</button>
			
			<button type="warn" class="btn" style="margin-top: 20px;"  @tap="go_live_room()">进入直播间</button>
			
				
		</view>
		
		<view style="display: flex;width: 700rpx;height: auto;flex-direction: column;justify-content: flex-start;align-items: flex-start; color: #777;margin-top: 60rpx;">
			<text>开始之前：</text>
			<text>1. 点击设置推流地址后弹出扫一扫功能，扫码系统后台的推流二维码。</text>
			<text style="margin-top: 10px;">2. 设置完成后，直接点击进入直播间，进去后点击中间红色按钮开播即可。</text>
			<text style="margin-top: 10px;">3. 你需要在主播端上看直播间公屏信息的话，请点击接入公屏信息，扫码系统的公屏二维码。</text>
			<text style="margin-top: 10px;">4. 注意：进入直播间返回了这个界面后，就不需要重新扫码设置推流地址了。直到下一场直播才需要重新扫码设置推流地址。</text>
		</view>
		
	</view>
</template>

<script>
	import {
		MQTT_IP,
		MQTT_OPTIONS,
	} from '@/config/mqtt.js';
	var mqtt = require('@/mqtt/mqtt.js')
	var client;
	export default {
		data() {
			return {
				pushUrl:""
			}
		},
		onLoad() {
	
		},
		methods: {
			sanPushUrl(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						const push_url = res.result;
						if (push_url.includes("rtmp://")) {
							uni.setStorageSync('zczm_push_url',push_url );
							uni.showToast({
						   	title: '设置成功',
							icon:"success"
						   });
						} else {
						   uni.showToast({
						   	title: '设置失败，请扫码时靠近一点',
							icon:"none"
						   });
						}
						
					}
				});
			},
			go_live_room(){
				const push_url = uni.getStorageSync('zczm_push_url')
				if(push_url){
					uni.navigateTo({
						url: "/pages/chainhai-ali-live-pusher/chainhai-ali-live-pusher"
					})
				}else{
					uni.showToast({
						title: '请扫码设置推流地址',
						icon:"none"
					});
				}
			},
			sanSetMqtt(){
				uni.scanCode({
					onlyFromCamera: true,
					success: function (res) {
						let danmu = res.result;
						danmu = danmu.split('-');
						let topic = "/live/chat/send/"+danmu[0]+"/"+danmu[1]
					
						uni.setStorageSync('danmu_topic',topic );
						uni.setStorageSync('live_id',"13");
						uni.setStorageSync('live_url',"https://tlcgp.tlcwjsc.com" );
							uni.showToast({
							title: '接入成功',
							icon:"success"
						});
						
					}
				});
			}
		
		// 	goto(pagePath){
		// 		goto('/pages/chainhai-ali-live-pusher/chainhai-ali-live-pusher')
		// 		uni.navigateTo({
		// 			url: pagePath
		// 		})
		// 	}
			
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 300rpx;
		width: 300rpx;
		margin-top: 150rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30rpx;
	}

	.text-area {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.text-area .btn{
		margin-bottom: 26rpx;
		
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
